<template>
    <a-card class="general-card">
        <a-form ref="formRef" :model="checkParam" :rules="rules">
            <a-row :gutter="24">
                <a-col :span="8">
                    <a-form-item label="品号" label-col-flex="100px" field="mb001">
                        <a-input  placeholder="输入品号" v-model="checkParam.mb001" @focus="cpvisible = true" allow-clear />
                    </a-form-item>
                </a-col>
                <a-col :span="8">
                    <a-form-item label="品名" label-col-flex="100px" >
                        <a-input  placeholder="输入品名" v-model="checkParam.mb002" @focus="cpvisible = true" readonly />
                    </a-form-item>
                </a-col>
                <a-col :span="8">
                    <a-form-item label="规格" label-col-flex="100px" >
                        <a-input  placeholder="输入规格" v-model="checkParam.mb003" @focus="cpvisible = true" readonly />
                    </a-form-item>
                </a-col>
                <a-col :span="8">
                    <a-form-item label="检验类型" label-col-flex="100px" field="jyType">
                        <!-- <a-input  placeholder="输入检验类型" allow-clear /> -->
                        <!--  -->
                        <a-select placeholder="输入检验类型" allow-search @change="changeStaff" v-model="checkParam.jyType" allow-clear>
                            <a-option label="调机首检" value="调机首检"></a-option>
                            <a-option label="首检" value="首检"></a-option>
                            <a-option label="来料检验" value="来料检验"></a-option>
                            <a-option label="过程检验" value="过程检验"></a-option>
                            <a-option label="成品检验" value="成品检验"></a-option>
                        </a-select>
                    </a-form-item>
                </a-col>
                <a-col :span="8">
                    <a-form-item label="工艺" label-col-flex="100px" field="mw001" >
                        <a-input  placeholder="输入工艺" allow-clear v-model="checkParam.mw001" @focus="gyvisible = true" />
                    </a-form-item>
                </a-col>
                <a-col :span="8">
                    <a-form-item label="工艺说明" label-col-flex="100px" >
                        <a-input  placeholder="输入工艺说明" allow-clear v-model="checkParam.mw003" @focus="gyvisible = true" />
                    </a-form-item>
                </a-col>
            </a-row>
        </a-form>

        <a-tabs default-active-key="1">
            <a-tab-pane key="1" title="文本型" >
                <vxe-table
                    ref="tableTextRef"
                    border
                    show-overflow
                    keep-source
                    max-height="400"
                    :edit-config="{trigger: 'click', mode: 'cell', showStatus: true}"
                    :data="tableTextData">
                    <vxe-column type="seq" width="70"></vxe-column>
                    <!-- <vxe-column field="name" title="检验编号" :edit-render="{name: 'input'}"></vxe-column> -->
                    <vxe-column field="udf01" title="检验项目" :edit-render="{name: 'input'}" align="center"></vxe-column>
                    <vxe-column field="udf02" title="检验工具" :edit-render="{name: 'input'}" align="center"></vxe-column>
                    <vxe-column field="mg006" title="检验标准" :edit-render="{name: 'input'}" align="center"></vxe-column>
                  <vxe-column field="udf03" title="检验频次" :edit-render="{name: 'input'}" align="center"></vxe-column>
                  <vxe-column field="udf06" title="检验厂别" align="center">
                    <template #default="{row}">
                      <a-select v-model="row.udf06">
                        <a-option>现场</a-option>
                        <a-option>测量室</a-option>
                      </a-select>
                    </template>
                  </vxe-column>
                    <vxe-column title="操作" align="center" width="80">
                        <template #default="{ row, rowIndex }">
                            <a-button type="primary" status="danger" size="mini" @click="delTextTableCol(row, rowIndex)">删除</a-button>
                        </template>
                    </vxe-column>
                </vxe-table>
            </a-tab-pane>
            <a-tab-pane key="2" title="数值型">
                <vxe-table
                    ref="tableNumRef"
                    border
                    :edit-config="{trigger: 'click', mode: 'cell', showStatus: true}"
                    :data="tableNumData">
                    <vxe-column type="seq" width="70"></vxe-column>
                    <vxe-column field="udf01" title="检验项目" :edit-render="{name: 'input'}" align="center"></vxe-column>
                    <vxe-column field="udf02" title="检验工具" :edit-render="{name: 'input'}" align="center"></vxe-column>
                  <vxe-column field="udf03" title="检验频次" :edit-render="{name: 'input'}" align="center"></vxe-column>
                  <vxe-column field="mg012" title="正公差" :edit-render="{name: 'input'}" align="center">
                        <template #default="{ row }">
                            {{ row.mg012 }}
                        </template>
                        <template #edit="{ row }">
                            <a-input-number v-model="row.mg012" :min="0" :precision="3"  step="0.001"/>
                        </template>
                    </vxe-column>
                    <vxe-column field="mg013" title="负公差" :edit-render="{name: 'input'}" align="center">
                        <template #default="{ row }">
                            {{ row.mg013 }}
                        </template>
                        <template #edit="{ row }">
                            <a-input-number v-model="row.mg013" :precision="3" step="0.001"/>
                        </template>
                    </vxe-column>
                    <vxe-column field="mg006" title="检验标准" :edit-render="{name: 'input'}" align="center"></vxe-column>
                    <vxe-column field="mg009" title="类型" align="center">
                        <template #default="{ row }">
                            <a-select v-model="row.mg009" >
                                <a-option v-for="(item,index) in qualityType" :value="item.value" >{{ item.label }}</a-option>
                            </a-select>
                        </template>
                    </vxe-column>
                  <vxe-column field="udf06" title="检验厂别" align="center">
                    <template #default="{row}">
                      <a-select v-model="row.udf06">
                        <a-option>现场</a-option>
                        <a-option>测量室</a-option>
                      </a-select>
                    </template>
                  </vxe-column>
                    <vxe-column title="操作" align="center" width="80">
                        <template #default="{ row, rowIndex }">
                          <a-button type="primary" status="danger" size="mini" @click="delNumTableCol(row, rowIndex)" >删除</a-button>
                        </template>

                    </vxe-column>
                </vxe-table>
            </a-tab-pane>
        </a-tabs>

        <a-row style="margin-top: 20px;">
            <a-col :span="2" offset="21">
                <a-button type="primary" status="success" @click="insertQualityFun">录入</a-button>
            </a-col>
        </a-row>



        <!-- 品号 -->
        <a-modal v-model:visible="cpvisible" @ok="cphandleOk" @cancel="handleCancel" title-align="start" :width="700">
            <template #title>
                产品选择
            </template>
            <div>
                 <a-form v-model="cpLimitParam">
                    <a-row :gutter="24">
                        <a-col :span="10">
                            <a-form-item label="品号" label-col-flex="40px" >
                                <a-input placeholder="输入品名" v-model="cpLimitParam.ph" allow-clear />
                            </a-form-item>
                        </a-col>
                        <a-col :span="10">
                            <a-form-item label="品名" label-col-flex="40px" >
                                <a-input placeholder="输入品名" v-model="cpLimitParam.pm" allow-clear />
                            </a-form-item>
                        </a-col>
                        <a-col :span="4">
                            <a-button type="primary" status="success" @click="queryCpFun">查询</a-button>
                        </a-col>
                    </a-row>
                 </a-form>
                 <vxe-table
                    ref="tableCpRef"
                    border
                    :loading="cpLoading"
                    :max-height="300"
                    :data="tableCpData">
                    <vxe-column type="radio" width="60"></vxe-column>
                    <vxe-column field="mb001" title="品号" align="center"></vxe-column>
                    <vxe-column field="mb002" title="品名" align="center"></vxe-column>
                    <vxe-column field="mb003" title="规格" align="center"></vxe-column>
                </vxe-table>
                <vxe-pager
                    size="mini"
                    v-model:current-page="cpLimitParam.current"
                    v-model:page-size="cpLimitParam.size"
                    background
                    style="margin-top: 20px;"
                    :total="cpLimitParam.total"
                    :layouts="['Home', 'PrevJump', 'PrevPage', 'JumpNumber', 'NextPage', 'NextJump', 'End', 'Sizes', 'FullJump', 'Total']"
                    @page-change="getCpTableData"
                />
            </div>
        </a-modal>



        <!-- 工艺 -->
        <a-modal v-model:visible="gyvisible" @ok="gyhandleOk" @cancel="handleCancel" title-align="start" :width="700">
            <template #title>
                工艺选择
            </template>
            <div>
                 <a-form v-model="cpLimitParam">
                    <a-row :gutter="24">
                        <a-col :span="10">
                            <a-form-item label="工艺编号" label-col-flex="80px" >
                                <a-input placeholder="输入工艺编号" v-model="gyLimitParam.gy" allow-clear />
                            </a-form-item>
                        </a-col>
                        <a-col :span="4">
                            <a-button type="primary" status="success" @click="queryGyFun">查询</a-button>
                        </a-col>
                    </a-row>
                 </a-form>
                 <vxe-table
                    ref="tableGyRef"
                    border
                    :loading="gyLoading"
                    :max-height="300"
                    :data="tableGyData">
                    <vxe-column type="radio" width="60"></vxe-column>
                    <vxe-column field="mw001" title="工艺编号" align="center"></vxe-column>
                    <vxe-column field="mw002" title="工艺名称" align="center"></vxe-column>
                    <vxe-column field="mw003" title="工艺说明" align="center"></vxe-column>
                </vxe-table>
                <vxe-pager
                    size="mini"
                    v-model:current-page="gyLimitParam.current"
                    v-model:page-size="gyLimitParam.size"
                    background
                    style="margin-top: 20px;"
                    :total="gyLimitParam.total"
                    :layouts="['Home', 'PrevJump', 'PrevPage', 'JumpNumber', 'NextPage', 'NextJump', 'End', 'Sizes', 'FullJump', 'Total']"
                    @page-change="getGyTableData"
                />
            </div>
        </a-modal>
    </a-card>
</template>

<script lang="ts">
import { toRefs } from 'vue';
import importConfig from './productInspection';

export default {
    setup() {
        const {
            base,
            tableTextRef,
            tableNumRef,
            getCpTableData,
            tableCpRef,
            cphandleOk,
            queryCpFun,
            queryGyFun,
            getGyTableData,
            gyhandleOk,
            tableGyRef,
            insertQualityFun,
            formatQualityType,
            delTextTableCol,
            delNumTableCol,
        } = importConfig();

        return {
            ...toRefs(base),
            tableTextRef,
            tableNumRef,
            getCpTableData,
            tableCpRef,
            cphandleOk,
            queryCpFun,
            queryGyFun,
            getGyTableData,
            gyhandleOk,
            tableGyRef,
            insertQualityFun,
            formatQualityType,
            delTextTableCol,
            delNumTableCol,
        };
    },
};
</script>

<style lang="less" scoped>
.formHeader {
    &-buttom {
        padding: 10px 0px;
        display: flex;
        align-items: flex-end;
        align-content: flex-end;
        justify-content: flex-end;
    }

    &-criteria {
        flex: 1 1 0;
        &-postizz {
            display: flex;
            justify-content: flex-end;
            margin-top: 25px;
        }
    }

    &-btn {
        border-left: 1px solid #ddd;
        flex: 0 0 86px;
        text-align: right;
    }
}

:deep(.arco-divider-horizontal) {
    margin: 10px 0;
}

.add-user-btn {
    display: flex;
}

.user-area {
    margin-top: 20px;
    height: calc(100vh - 395px);

    :deep(.arco-table-td-content) {
        text-align: center;
    }
}

:deep(.arco-form-item){
    margin-bottom: 10px;
}
</style>
